<template>
    <div class="home-panel">
        <HomePanl style="position: relative; background: #f5f5f5;" title="最新专题">
            <template #sub>
                <RouterLink class="x-m" to="/"><span>查看全部 &gt;</span></RouterLink>
                <div class="special-list">
                    <div class="special-item" v-for="item in ls" :key="item.id">
                        <RouterLink to="/" class="im">
                            <img :src="item.detailsUrl" alt="">
                        </RouterLink>
                        <div class="meta">
                            <p class="title">
                                <span class="top ellipsis">{{ item.title }}</span>
                                <span class="sub ellipsis">{{ item.summary }}</span>
                            </p>
                            <span class="price">¥{{ item.lowestPrice }}起</span>
                        </div>
                        <div class="foot">
                            <span class="like"><i class="iconfont icon-hart1"></i>{{ item.collectNum }}</span>
                            <span class="view"><i class="iconfont icon-see"></i>{{ item.viewNum }}</span>
                            <span class="reply"><i class="iconfont icon-message"></i>{{ item.replyNum }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </HomePanl>
    </div>
</template>

<script>
import HomePanl from "../Homes/goods.vue"
import { getSpecial } from '@/request/api/myc/myc'
export default {
        components:{
        HomePanl
        },
        data(){
            return{
                ls:[]
            }
        },
        mounted() {
            this.Category();

        },
        methods: {
            async Category() {
                const res = await getSpecial();
                console.log("服饰", res.data.result);
                this.ls = res.data.result
            }
        }
    }
</script>

<style lang="scss" scoped>
.home-panel {
    position: relative;
    height: 540px;
}

.x-m {
    margin-left: 80px;

    span {
        font-size: 16px;
        vertical-align: middle;
        margin-right: 4px;
        color: #999;
    }
}

.x-m:hover span {
    color: #27ba9b;
}

.special-list {
    width: 100%;
    height: 380px;
    // background: red;
    position: absolute;
    top: 115px;
    left: 0;
    height: 380px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .special-item {
        width: 404px;
        background: #fff;
        transition: all .5s;

        .im {
            display: block;
            width: 100%;
            height: 288px;
            position: relative;
            

            img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover;
            }
        }

        .meta {
            background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 50%);
            position: absolute;
            // left: 0;
            top: 0;
            width: 404px;
            height: 288px;
            cursor: pointer;

            .title {
                position: absolute;
                bottom: 0;
                left: 0;
                padding-left: 16px;
                width: 70%;
                height: 70px;

                .top {
                    color: #fff;
                    font-size: 22px;
                    display: block;
                }

                .sub {
                    display: block;
                    font-size: 19px;
                    color: #999;
                }
            }

            .price {
                position: absolute;
                bottom: 25px;
                right: 16px;
                line-height: 1;
                padding: 4px 8px 4px 7px;
                color: #cf4444;
                font-size: 17px;
                background-color: #fff;
                border-radius: 2px;
            }
        }

        .foot {
            height: 72px;
            line-height: 72px;
            padding: 0 20px;
            font-size: 16px;

            i {
                display: inline-block;
                width: 15px;
                height: 14px;
                margin-right: 5px;
                color: #999;
            }

            .like {
                float: left;
                margin-right: 25px;
                vertical-align: middle;
            }

            .view {
                float: left;
                margin-right: 25px;
                vertical-align: middle;
            }

            .reply {
                float: right;
                margin-right: 25px;
                vertical-align: middle;
            }

        }

    }

    .special-item:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    }
}
</style>